import React from 'react'
import { Table, Button, Row, Modal } from 'antd'
import UsersApi from 'services/users'

export default class UserPage extends React.Component {
  constructor() {
    super()
    this.state = {
      modalVisible: false,
      userData: {},
    }
  }

  componentDidMount() {
    UsersApi.page().then(response => {
      if (response) {
        this.setState({
          userData: response.data,
        })
      }
    })
  }

  showModal = () => {
    this.setState({
      modalVisible: true,
    })
  }

  handleOk = () => {
    this.setState({
      modalVisible: false,
    })
  }

  handleCancel = () => {
    this.setState({
      modalVisible: false,
    })
  }

  render() {
    const columns = [{
      title: 'UserName',
      dataIndex: 'userName',
    }, {
      title: 'NickName',
      dataIndex: 'nickName',
    }, {
      title: 'Age',
      dataIndex: 'age',
    }, {
      title: 'Email',
      dataIndex: 'email',
    }, {
      title: 'Address',
      dataIndex: 'address',
    }, {
      title: 'Phone',
      dataIndex: 'mobilePhone',
    }, {
      title: 'CreateTime',
      dataIndex: 'createTime',
    }, {
      title: 'UpdateTime',
      dataIndex: 'updateTime',
    }]
    return (
      <div>
        <Row>
          <Button type="primary" onClick={this.showModal}>Add</Button>
        </Row>
        <Row>
          <Table dataSource={this.state.userData.records} columns={columns} rowKey="id" />
        </Row>

        <Modal
          title="Basic Modal"
          visible={this.state.modalVisible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>
      </div>
    )
  }
}
